$colors: #f50 #34bfa3 #36a3f7 #40c9c6;
.panel-group {
  .icon svg {
    width: 75px;
    height: 75px;
  }

  .ant-col {
    margin-bottom: 20px;
    @for $i from 1 through 4 {

      &:nth-child(#{$i}) {
        .anticon {
          color: nth($colors, $i);
        }

        &:hover {
          .anticon {
            color: #fff;
            & > svg {
              background: nth($colors, $i);
            }
          }
        }
      }
    }
  }

  .ant-statistic-content {
    text-align: center;
  }

  .block-item {
    display: flex;
    padding: 20px 20px 20px 15px;
    background: #fff;
    cursor: pointer;

    .icon {
      flex: 1;
      text-align: left;
      align-self: center;

      & > svg {
        padding: 15px;
        border-radius: 5px;
        transition: .1s linear;
      }
    }

    .data {
      padding-top: 10px;
      text-align: left;
      align-self: center;

      .ant-statistic-title {
        margin-bottom: 5px;
        font-size: 16px;
        font-weight: bold;
        color: #00000073;
      }

      .ant-statistic-content-value-int {
        color: #666;
        font-weight: bold;
        font-size: 20px;
      }
    }
  }
}